<template>
  <el-drawer
    :title="title"
    v-model="visible"
    :direction="direction"
    :size="800"
  >
    <section class="drawer-main">
      <el-form
        label-position="left"
        :model="ruleForm"
        :rules="rules"
        ref="ruleFormRef"
        label-width="120px"
      >
        <el-form-item label="数据源名称" prop="srcName" >
          <el-input v-model="ruleForm.srcName" />
        </el-form-item>
        <el-form-item label="数据源类型" prop="srcType">
          <el-select v-model="ruleForm.srcType" placeholder="请选择数据源类型">
            <el-option
              v-for="(item, index) in dsTypeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
       
        <el-form-item label="URL" prop="url"   :rules="{
            required: true,
            message: 'URL是必填项',
            trigger: 'blur',
          }"  v-if="ruleForm.srcType == 'URL'">
          <el-input v-model="ruleForm.url" />
        </el-form-item>
        <el-form-item label="数据库类型" prop="dbType"  v-if="ruleForm.srcType !== 'URL'">
          <el-select v-model="ruleForm.dbType" placeholder="请选择数据源类型">
            <el-option
              v-for="(item, index) in dbTypeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="数据库连接串"
          prop="connstr"
          :rules="{
            required: true,
            message: '数据库连接串是必填项',
            trigger: 'blur',
          }"
          v-if="ruleForm.srcType !== 'URL'"
        >
          <el-input v-model="ruleForm.connstr" placeholder="jdbc:mysql://10.0.0.1:10001/test" />
        </el-form-item>
        <el-form-item
          label="用户名"
          prop="username"
          :rules="{
            required: true,
            message: '用户名是必填项',
            trigger: 'blur',
          }"
          v-if="ruleForm.srcType !== 'URL'"
        >
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
          :rules="{
            required: true,
            message: '密码是必填项',
            trigger: 'blur',
          }"
          v-if="ruleForm.srcType !== 'URL'"
        >
          <el-input type="password" v-model="ruleForm.password" />
        </el-form-item>
        <el-form-item label="所属应用" prop="appId">
          <AppAutoSelect
            v-if="modelValue"
            :query="ruleForm.appName"
            ref="AppAutoSelect"
            v-model="ruleForm.appId"
          />
        </el-form-item>
      </el-form>
    </section>

    <footer class="drawer-footer">
      <el-button type="primary" @click="sendTest" :loading="loading" plain v-if="ruleForm.srcType !== 'URL'">
        测试连接
      </el-button>
      <el-button type="primary" @click="submit" :loading="loading">
        确 定
      </el-button>
      <el-button @click="beforeClose">取 消</el-button>
    </footer>
  </el-drawer>
</template>

<script>
import { defineComponent, watch, computed, ref } from "vue";

import {
  createDataSource,
  updateDataSource,
  testConnect,
} from "@/api/adaptation";
import useEditDrawer from "@/hooks/useEditDrawer";
import AppAutoSelect from "@/components/AppAutoSelect/";
import { ElMessage } from "element-plus";
export default defineComponent({
  name: "EditDialog",
  emits: ["update:modelValue", "update-list"],
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: () => {},
    },
    // create 新增， update 修改
    type: {
      type: String,
      default: "create",
    },
  },
  components: { AppAutoSelect },
  setup(props, { emit }) {
    // 表单
    const DEFAULT_FORM = {
      srcType: null,
      srcName: null,
      appId: null,
      connstr: null,
      username: null,
      password: null
    };
    // 数据源类型
    const dsTypeList = ref([
      {
        label: "DB",
        value: "DB",
      },
      {
        label: "URL",
        value: "URL",
      },
    ]);
    // 数据库类型
    const dbTypeList = ref([
      {
        label: "MySQL",
        value: "MySQL",
      },
      {
        label: "Oracle",
        value: "Oracle",
      },
    ]);
    const appList = ref([]);
    // 验证
    const rules = computed(() => {
      const baseRules = {
        srcType: [{ required: true, message: "请选择数据源类型" }],
        srcName: [{ required: true, message: "请选择数据源名称" }],
        appId: [{ required: true, message: "请选择所属应用" }],
      };
      return baseRules;
    });

    const {
      visible,
      direction,
      title,
      loading,
      ruleForm,
      ruleFormRef,
      close,
      submit,
      beforeClose,
    } = useEditDrawer({
      createApi: createDataSource,
      editApi: updateDataSource,
      defaultForm: DEFAULT_FORM,
      emit,
      type: props.type,
      props,
    });
    // 显示时赋值
    watch(visible, (value) => {
      if (value) {
        ruleForm.value = {
          ...DEFAULT_FORM,
          ...props.item,
        };
      }
    });
    // 测试连接
    const sendTest = async () => {
      // 先测是否都有
      loading.value = true;
      const res = await testConnect(ruleForm.value);
      loading.value = false;
      console.log(res);
      if (res.status === 200) {
        if (res.data.indexOf("失败") != -1) {
          ElMessage.warning(res.data);
        } else {
          ElMessage.success(res.data);
        }
      } else {
      }
      // 再进行连接
    };
    return {
      loading,
      visible,
      direction,
      ruleFormRef,
      ruleForm,
      rules,
      title,
      close,
      submit,
      dsTypeList,
      dbTypeList,
      appList,
      sendTest,
      beforeClose,
    };
  },
});
</script>

<style lang="scss" scoped>
$height: 50px;
.drawer-main {
  height: calc(100% - 50px);
}
.drawer-footer {
  text-align: right;
  height: $height;
  line-height: $height;
}
</style>
